
import React, { useState,useEffect,useRef,createContext,useContext,useMemo, useCallback } from 'react';
import reactDom from 'react-dom';
import 'antd/dist/antd.css';
import { Button, DatePicker ,Modal} from 'antd';
import { Input } from 'antd';
import { List, Avatar } from 'antd';
import { Layout } from 'antd';
import './demo.less'
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [mycount,setMycount] = useState(60)
  const [mytime,setMytime] = useState(JSON.parse( localStorage.getItem('mytime')))
  let second,minute,hour,day;
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  useEffect(()=> {
    if(isModalVisible==true){
    setTimeout(()=> { 
      setMycount(mycount+1)
    },1000)
  }
  })

  useEffect(()=> {
    setTimeout(()=> {
        setMytime( (mycount%60) + '秒')
    },1000)
  })

  useMemo(()=> {
    console.log(mytime)
  },[mytime])
  return (
    <>
      <Button type="primary" onClick={showModal}>
        开始摸鱼
      </Button>
      <Modal title="Touch Fish" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} keyboard={true} footer={null} maskClosable={false} style={{width:'1000px'}}>
        <div style={{textAlign:'center'}}>
        <div className='touchfish'></div>
        <p style={{fontSize:'20px',marginTop:'10%'}}>你已摸鱼{mytime}</p>
        </div>
        <Button type="primary" onClick={handleOk} className='finmy'>结束摸鱼</Button>
      </Modal>
    </>
  );
};
const add0 = (m) => {
  return m < 10 ? '0' + m : m;
}
 const formatDate = (timeStamp) => {
  let time = new Date(timeStamp),
      y = time.getFullYear(),
      m = time.getMonth() + 1,
      d = time.getDate(),
      h = time.getHours(),
      mm = time.getMinutes(),
      s = time.getSeconds();

  return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
}
const date=new Date()
const LessDemo=()=>{
  const [dtime,setDtime] = useState('')
  const [ktime,setKtime] = useState('')
  const [ptime,setPtime] = useState('')
  const [count,setcount] = useState(0)
  const [hours,setHours] = useState(0)
  const [mints,setMints] = useState(0)
  const [seconds,setSeconds] = useState(0)
  const date=new Date()
  useEffect(()=>{
    setTimeout(() => {
      var minutes = date.getMinutes()
      var seconds = date.getSeconds()
      setHours((date.getHours()) % 12 * (360 / 12) + (360 / 12) * (minutes / 60));
      setMints(minutes * (360 / 60) + (360 / 60) * (seconds / 60));
      setSeconds(seconds * (360 / 60))
      if(date.getHours()<=12) {
        setDtime('上午'+date.getHours()+'时'+date.getMinutes()+'分'+date.getSeconds()+'秒')
      }
      else {
        setDtime('下午'+date.getHours()+'时'+date.getMinutes()+'分'+date.getSeconds()+'秒')
      }
      if(date.getHours()<=17) {
      setcount((17-date.getHours())+(60-date.getMinutes())+(60-date.getSeconds()))
      }
      else {
        setcount(-1)
      }
      if(count<=0) {
        setKtime('下班了,别忘记打卡')
      }
      else if(count>0) {
        setKtime('距离下班还有：'+(17-date.getHours())+'时'+(60-date.getMinutes())+'分'+(60-date.getSeconds())+'秒')
      }
      if(date.getHours()<=9) {
        setPtime('未到上班时间')
      }

      else
      (
      setPtime('您今日已工作：'+ (date.getHours()-9)+'时'+(date.getMinutes())+'分'+(date.getSeconds())+'秒')
      )
      console.log(count)
    }, 1000)
  })
  return (
     <div className='div-0'>
       <div className='btnc'>
        <p>
          BeiJing时间
        </p>
        <p>{dtime}</p>
        </div>
        <div className='line1'></div>
        <div className='clock'>
          <div className='hours' style={{transform: 'rotateZ('+hours+'deg)'}}></div>
          <div className='mints' style={{transform: 'rotateZ('+mints+'deg)'}}></div>
          <div className='seconds' style={{transform: 'rotateZ('+seconds+'deg)'}}></div>
        </div>
        <div className='line2'></div>
       <div className='endt'>
         <p>{ptime}</p>
         <p>{ktime}</p> 
         <p></p>
         <App/>
       </div>
     </div>
   )
 }
reactDom.render(
  <div>
  <LessDemo></LessDemo>
  </div>
,document.getElementById("root")
)